import React, { useState, useEffect } from 'react';
import { connect, history } from 'umi';
import { Mask, List } from 'antd-mobile';
import QRCode from 'qrcode.react';

import './index.less';
function index(props) {
  let [visible, setVisible] = useState(false);
  let [isshowicon, setisshowicon] = useState(false);
  let [shopcount, setshopcount] = useState(0);
  let [totprice, settotprice] = useState(0);
  let [shopslist, setshopslist] = useState([]);
  useEffect(() => {
    let num = 0;
    let conypri = 0;
    props.shopslist.forEach((item) => {
      num += item.num;
      conypri += item.num * item.price;
    });
    let arr = props.shopslist.filter((item) => {
      return item.num != 0;
    });
    setshopslist(arr);
    settotprice(conypri);
    setshopcount(num);
  }, []);
  return (
    <div className="adad">
      <div className="shoplists">
        <List style={{ display: shopcount != 0 ? '' : 'none' }}>
          {shopslist.map((item) => {
            return (
              <List.Item key={item._id}>
                <img src={item.pic} alt="" />
                <div className="center">
                  <h2>{item.dname}</h2>
                  <span>
                    <b>x</b>
                    {item.num}
                  </span>
                </div>
                <div className="shopprice">
                  <b>$</b>
                  {item.price.toFixed(2)}
                </div>
              </List.Item>
            );
          })}
          {/* {users.map(user => (
        <List.Item
          key={user.name}
          prefix={
            <Image
              src={user.avatar}
              style={{ borderRadius: 20 }}
              fit='cover'
              width={40}
              height={40}
            />
          }
          description={user.description}
        >
          {user.name}
        </List.Item>
      ))} */}
        </List>
      </div>
      <div className="qt1" style={{ display: shopcount != 0 ? '' : 'none' }}>
        <div className="qtt1">
          <span
            className="iconfont icon-canting icon1"
            style={{ display: isshowicon ? 'none' : '' }}
          ></span>
          <span
            style={{
              display: isshowicon ? 'none' : '',
              margin: '0 0 0 30px',
              fontSize: '30px',
              color: 'red',
              fontWeight: 'border',
            }}
            className="naini"
          >
            ${totprice.toFixed(2)}
          </span>
          <label
            className="fuqu1"
            style={{ display: isshowicon ? 'none' : '' }}
          >
            {shopcount}
          </label>
        </div>
        <div className="footbtn">
          <button
            onClick={() => {
              history.push('/home');
            }}
          >
            继续点餐
          </button>
          <button
            onClick={() => {
              setVisible(true);
            }}
          >
            支付下单
          </button>
        </div>
      </div>
      ;
      <Mask visible={visible} onMaskClick={() => setVisible(false)}>
        <div className="overlayContent">
          <QRCode
            id="qrCode"
            value="https://www.jianshu.com/u/992656e8a8a6"
            size={200} // 二维码的大小
            fgColor="#000000" // 二维码的颜色
            style={{ margin: 'auto' }}
            imageSettings={{
              // 二维码中间的logo图片
              src: 'logoUrl',
              height: 100,
              width: 100,
              excavate: true, // 中间图片所在的位置是否镂空
            }}
          />
        </div>
      </Mask>
    </div>
  );
}
export default connect((sate) => {
  return {
    shopslist: sate.index.shopslist,
  };
})(index);
